<template>
  <div>
    <h2>可拖动列表 (Vue2)</h2>
    <draggable-list
      v-model="items"
      @change="handleChange"
      item-key="id"
    >
      <template v-slot:item="{ item }">
        <div style="display: flex; align-items: center;">
          <span style="margin-right: 10px;">{{ item.id }}.</span>
          <span>{{ item.name }}</span>
        </div>
      </template>
      
      <!-- 可选的自定义拖动把手 -->
      <template v-slot:handle>
        <span style="color: #666;">拖动我</span>
      </template>
    </draggable-list>
    
    <div style="margin-top: 20px;">
      <h3>当前顺序：</h3>
      <ul>
        <li v-for="item in items" :key="item.id">
          {{ item.id }} - {{ item.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import DraggableList from '@/components/DraggableList.vue'

export default {
  components: {
    DraggableList
  },
  data() {
    return {
      items: [
        { id: 1, name: '项目一' },
        { id: 2, name: '项目二' },
        { id: 3, name: '项目三' },
        { id: 4, name: '项目四' },
        { id: 5, name: '项目五' }
      ]
    }
  },
  methods: {
    handleChange(newItems) {
      console.log('顺序已改变:', newItems)
    }
  }
}
</script>